<script type="text/javascript">
    function agregarInforme() {
        var tipo_informe_id = $("#tipo_informe_id").val();
        var comentario = $("#comentario_informe").val();
        $.ajax({
            type: "POST",
            url: "<?php echo $this->baseUrl() ?>/usuarios/ajax/agregarinforme",
            dataType: "html",
            data: {"tipo_informe_id": tipo_informe_id, "comentario": comentario },
            success: function (data) {
                $("#informes_nuevos").append(data);
                $("#comentario_informe").val("");
            },
            error: function () {
                $("#mensajeInforme").html('<div class="alert alert-error"><strong>Error!</strong> Hubo un Problema Al Intentar registrar el informe.</div>');
            }
        });
    }
</script>

<style type="text/css">
    .tabla_informes {
        width: 80%;
        border: none;
        margin-bottom: 0px;
        background-color: #eaeaea;
    }
    .tabla_informes td {
        padding: 2px;
    }
</style>

<div class="well well-small"  style="<?php echo "background-color:" . $this->colorContenido . ";"; ?>">
    <legend>Calificacion</legend>
    <div class="row">
        <div class="span10">
            <!-- ROW 1-->
            <div id="mensajeInforme"></div>
            <div class="control-group" style="display: inline-block;">
                <label class="control-label" for="inputNacionalidad">Tipo Informe</label>
                <div class="controls">
                    <select  class="input-large" id="tipo_informe_id" name="tipo_informe_id" >
                        <?php foreach ($this->tiposInformes as $tipoInforme) { ?>
                            <option value="<?php echo $tipoInforme->getId(); ?>"><?php echo $tipoInforme->getDescripcion(); ?></option>
                        <?php } ?>
                    </select>
                </div>
            </div>
            <div class="control-group" style="display: inline-block;">
                <label class="control-label" for="inputDireccion">Comentario</label>
                <div class="controls">
                    <textarea id="comentario_informe" name="comentario_informe"  class="span6"></textarea> 
                </div>
            </div>
            <div class="control-group" style="display: inline-block;">
                <div class="controls">
                    <button onclick="agregarInforme()" type="button" class="btn btn-success"  ><i class="icon-plus-sign icon-white"></i>Agregar</button>
                </div>
            </div><br>
            
            <div id="informes_nuevos"></div><br/>
            
            <legend>Listado</legend>
            <div class="control-group">
                <label>Ver listado por: </label>
                <select  class="input-large" id="listado_tipo_informe_id" name="listado_tipo_informe_id" onchange="actualizarInformes(true);" >
                    <option value="0">Todos</option>
                    <?php foreach ($this->tiposInformes as $tipoInforme) { ?>
                        <option value="<?php echo $tipoInforme->getId(); ?>"><?php echo $tipoInforme->getDescripcion(); ?></option>
                    <?php } ?>
                </select>
            </div>
            <div id="tabla_informes">
               <?php echo $this->render('ajax/obtenerinformesjson.phtml'); ?> 
            </div>
            <!-- END ROW 3 -->
        </div>
    </div>
    <br/><br/>
</div>